<script setup lang="ts">
import { createInvoiceTitleAPI } from '@/apis/createInvoiceTitle'
import { editInvoiceTitleAPI } from '@/apis/editInvoiceTitle'
import { useUserInfoStore } from '@/store/userInfo'
import { InvoiceTitleType } from '@/types/enum'

const router = useRouter()
const userInfoStore = useUserInfoStore()

const oldDataId = ref('')
const loading = ref(false)

onLoad((options) => {
  if (options && options.id)
    oldDataId.value = options.id
})

const formRef = ref()
const formData = ref({
  type: InvoiceTitleType.enterprise,
  invoice_name: '',
  taixer: '',
  address: '',
  mobile: '',
  bank_name: '',
  bank_account: '',
})

const rules = {
  invoice_name: { required: true, message: '请输入发票抬头' },
  taixer: { required: true, message: '请输入纳税人识别号' },
}

const handleSubmit = useThrottleFn(async () => {
  loading.value = true
  if (oldDataId.value) {
    const res = await editInvoiceTitleAPI({
      ...formData.value,
      type: formData.value.type.toString(),
      id: oldDataId.value,
    }, userInfoStore.userInfo!.token)
    if (res.data?.code !== 1)
      return
  }
  else {
    const res = await createInvoiceTitleAPI({
      ...formData.value,
      type: formData.value.type.toString(),
    }, userInfoStore.userInfo!.token)
    if (res.data?.code !== 1)
      return
  }
  loading.value = false
  uni.showModal({
    title: '保存成功',
    success: (result) => {
      if (result.confirm)
        router.back()
    },
    showCancel: false,
  })
}, 1000)
</script>

<template>
  <uv-form ref="formRef" :model="formData" :rules="rules">
    <ListSectionAlt title="本页银行账号和地址等信息仅用于发票开具" title-placement="center">
      <ListCellAlt label="抬头类型">
        <view class="flex items-center">
          <view class="flex items-center" @tap="formData.type = InvoiceTitleType.enterprise">
            <Checkbox :checked="formData.type === InvoiceTitleType.enterprise" />
            <Spacer width="14" />
            <view class="text-28rpx text-#333333 font-medium">
              企业单位
            </view>
          </view>
          <Spacer width="36" />
          <view class="flex items-center" @tap="formData.type = InvoiceTitleType.individual">
            <Checkbox :checked="formData.type === InvoiceTitleType.individual" />
            <Spacer width="14" />
            <view class="text-28rpx text-#333333 font-medium">
              个人/非企业单位
            </view>
          </view>
        </view>
      </ListCellAlt>
      <Divider width="702" />
      <uv-form-item prop="invoice_name" :custom-style="{ padding: 0 }">
        <ListCellAlt label="发票抬头" class="flex-1">
          <ListInputAlt v-model="formData.invoice_name" type="text" placeholder="请填写发票抬头" />
        </ListCellAlt>
      </uv-form-item>
      <Divider width="702" />
      <uv-form-item prop="taixer" :custom-style="{ padding: 0 }">
        <ListCellAlt label="纳税人识别号" class="flex-1">
          <ListInputAlt v-model="formData.taixer" type="text" placeholder="请填写纳税人识别号" />
        </ListCellAlt>
      </uv-form-item>
      <Divider width="702" />
      <ListCellAlt label="注册地址">
        <ListInputAlt v-model="formData.address" type="text" placeholder="请填写注册地址（非必填）" />
      </ListCellAlt>
      <Divider width="702" />
      <ListCellAlt label="注册电话">
        <ListInputAlt v-model="formData.mobile" type="text" placeholder="请填写注册电话（非必填）" />
      </ListCellAlt>
      <Divider width="702" />
      <ListCellAlt label="开户银行">
        <ListInputAlt v-model="formData.bank_name" type="text" placeholder="请填写开户银行（非必填）" />
      </ListCellAlt>
      <Divider width="702" />
      <ListCellAlt label="银行账号">
        <ListInputAlt v-model="formData.bank_account" type="text" placeholder="请填写银行账号（非必填）" />
      </ListCellAlt>
      <Spacer height="800" />
    </ListSectionAlt>
  </uv-form>
  <RGButton
    class="fixed bottom-40rpx x-center"
    size="large"
    corner="large"
    @tap="handleSubmit"
  >
    保存
  </RGButton>
</template>

<route lang="yaml">
name: 'editingTitleForm'
style:
  navigationBarTitleText: '添加抬头'
</route>
